/* 首先我们需要重置样式 reset */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* 设置主体样式 main styling */
html,
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* 两者都是制作web页面时用到的单位，PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但如果改变浏览器的缩放，原本的布局就会被打破，这时候就可以使用em定义页面的字体大小，em是相对于父元素的，1em等于一倍的父元素字体大小。
  EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，也比较麻烦。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，所以rem用的更广泛。
  IE6-IE8，不支持em和rem属性，px是所有浏览器都支持。
  因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。*/
    line-height: 1.7em;
}

a {
    color: #333;
    text-decoration: none;
}

h1,
h2,
h3 {
    padding-bottom: 20px;
}

p {
    margin: 10px 0;
}

/* 通用样式 utility classes */
.conatiner {
    margin: 0 auto;
    max-width: 1100px;
    /* overflow:hidden  溢出隐藏
    给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 */
    overflow: hidden;
    padding: 0 20px;
}

/* 设置通用颜色 */
.text-primary {
    color: #f7c08a;
}

/* 设置通用背景颜色 */
.bg-dark {
    background: #444;
    color: #fff;
}

.clr {
    /*清除浮动*/
    clear: both;
}

/* navbar */
#navbar {
    background: #333;
    color: #fff;
    /* auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 */
    overflow: auto;
}

#navbar a {
    color: #fff;
}

#navbar h1 {
    float: left;
    padding-top: 20px;
}

#navbar h1 {
    float: left;
    padding-top: 20px;
}

#navbar ul {
    float: right;
    list-style: none;
}

#navbar ul li {
    float: left;
}

#navbar ul li a {
    /* 此元素将显示为块级元素，此元素前后会带有换行符。 */
    display: block;
    /* 内边距20px */
    padding: 20px;
    /* 把文本排列到中间,居中对齐 */
    text-align: center;
}

#navbar ul li a:hover,
#navbar ul li a.current {
    background: #444;
    color: #f7c08a;
}


/* showcase部分的样式 */
#showcase {
    /* 导入图片  no-repeat设置不重复 center居中 center/cover 全覆盖 */
    background: url('../img/01index-showcase-bg.jpg') no-repeat center center/cover;
    height: 600px;
}

/* 设置文本 */
#showcase .showcase-content {
    color: #fff;
    text-align: center;
    padding-top: 170px;
}

#showcase .showcase-content h1 {
    font-size: 60px;
    line-height: 1.2em;
}

#showcase .showcase-content p {
    font-size: 20px;
    line-height: 1.7em;
    padding-bottom: 20px;
}

.btn {
    display: inline-block;
    font-size: 18px;
    color: #fff;
    background: #333;
    padding: 13px 20px;
}

/* 添加鼠标移入效果:hover */
.btn:hover {
    background-color: #f7c08a;
}

.btn-light {
    background: #f4f4f4;
    color: #333;
}

/* home-info */
#home-info {
    height: 400px;
}

#home-info .info-img {
    float: left;
    width: 50%;
    background: url('../img/02index-homeinfo-bg.jpg') no-repeat center center/cover;
    height: 100%;
}

#home-info .info-content {
    float: right;
    width: 50%;
    text-align: center;
    height: 100%;
    padding: 50px 30px;
    /* 超出部分隐藏 */
    overflow: hidden;

}

#home-info .info-content p {
    padding-bottom: 30px;
}


/* features部分*/
.box {
    /*先设置左浮动,让三个块处于同一行*/
    float: left;
    /*因为三个块占用一个行,所以设置宽度为33.3%*/
    width: 33.3%;
    /*设置内部边距*/
    padding: 50px;
    /*设置文本居中*/
    text-align: center;
}

.box i {
    margin-bottom: 10px;
}

.bg-light {
    background: #f4f4f4;
    color: #333;
}

.bg-primary {
    background: #f7c08a;
    color: #333;
}

/*footer*/
#main-footer {
    text-align: center;
    background: #333;
    color: #fff;
    padding: 20px;
}
